
import React, { useState, useContext, forwardRef, useCallback, useEffect } from 'react'
import CustomizeModal, { CustomizeModalButton, CustomizeModalContext } from "@common/presentational/CustomizeModal";
import { Row, Col, Radio, Button } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { getAlipayAccountList, bindConfigStore } from "@sagas/payment";
const BindAlipayAccountContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { callback } = props
    const { store_id } = params
    const [selectValue, setSelectValue] = useState()
    const dispatch = useDispatch()
    const { rechargeAlipayAccount } = useSelector(state => state.payment)
    useEffect(() => {
        dispatch(getAlipayAccountList({
            pageNo: 1,
            pageSize: 100
        }))
    }, [])

    const changeSelect = (e) => {
        setSelectValue(e.target.value)
    }

    const submit = () => {
        dispatch(bindConfigStore({
            accountId: selectValue,
            payType:3,
            store_id
        },()=>{
            callback && callback()
        }))
        hide()
    }


    return (
        <>
            <div className="payment-select-account">
                <Radio.Group className="recharge-account-radio-group" value={selectValue} onChange={changeSelect}>
                    <Row className="recharge-account-list">
                        {(rechargeAlipayAccount.accounts || []).filter(o=>o.status === 2).map(item => {
                            return (
                                <Col span={8} key={item.id}>
                                    <Radio value={item.id}>
                                        <div className="recharge-account-item flex-row-between alipay">
                                            <div className='account-info'>
                                                <div className="ft-16 ft-clr-d text-overflow">{item.name}</div>
                                                <div className="ft-12 ft-clr-l text-overflow">商户ID：{item.mch_id}</div>
                                                <div className="ft-12 ft-clr-l text-overflow">{item.principal_name || '无企业主体'}</div>
                                            </div>
                                            <div className='account-img'>
                                                <img className="img" src={require("@assets/image/recharge_alipay.png")} />
                                            </div>
                                        </div>
                                    </Radio>
                                </Col>
                            )
                        })}
                    </Row>
                </Radio.Group>
            </div>
            <CustomizeModalButton
                onOk={submit}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal width={810} title="绑定支付宝收款账号" ref={ref}>
        <BindAlipayAccountContent {...props} />
    </CustomizeModal>
))